<!DOCTYPE html>
<html lang="zh">
<head>
  <th:block th:include="include :: header('拖动排序')"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
  <div class="row">
    <div class="col-sm-4">
      <div class="ibox">
        <div class="ibox-content">
          <h3>任务列表</h3>
          <p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p>
          
          <div class="input-group">
            <input type="text" placeholder="添加新任务" class="input input-sm form-control">
            <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> 添加</button>
                                </span>
          </div>
          
          <ul class="sortable-list connectList agile-list">
            <li class="warning-element">
              加强过程管理，及时统计教育经费使用情况，做到底码清楚，
              <div class="agile-detail">
                <a href="#" class="pull-right btn btn-xs btn-white">标签</a>
                <i class="fa fa-clock-o"></i> 2018.09.01
              </div>
            </li>
            <li class="success-element">
              支持财会人员的继续培训工作。
              <div class="agile-detail">
                <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                <i class="fa fa-clock-o"></i> 2018.05.12
              </div>
            </li>
            <li class="info-element">
              协同教导处搞好助学金、减免教科书费的工作。
              <div class="agile-detail">
                <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                <i class="fa fa-clock-o"></i> 2018.09.10
              </div>
            </li>
            <li class="danger-element">
              要求会计、出纳人员严格执行财务制度，遵守岗位职责，按时上报各种资料。
              <div class="agile-detail">
                <a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
                <i class="fa fa-clock-o"></i> 2018.06.10
              </div>
            </li>
            <li class="warning-element">
              做好职工公费医疗工作，按时发放门诊费。
              <div class="agile-detail">
                <a href="#" class="pull-right btn btn-xs btn-white">标签</a>
                <i class="fa fa-clock-o"></i> 2018.09.09
              </div>
            </li>
            <li class="warning-element">
              有计划地把课本复习三至五遍。
              <div class="agile-detail">
                <a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
                <i class="fa fa-clock-o"></i> 2018.08.04
              </div>
            </li>
            <li class="success-element">
              看一本高质量的高中语法书
              <div class="agile-detail">
                <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                <i class="fa fa-clock-o"></i> 2018.05.12
              </div>
            </li>
            <li class="info-element">
              选择一份较好的英语报纸，通过阅读提高英语学习效果。
              <div class="agile-detail">
                <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                <i class="fa fa-clock-o"></i> 2018.09.10
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="ibox">
        <div class="ibox-content">
          <h3>进行中</h3>
          <p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p>
          <ul class="sortable-list connectList agile-list">
            <li class="success-element">
              全面、较深入地掌握我们“产品”的功能、特色和优势并做到应用自如。
              <div class="agile-detail">
                <a href="#" class="pull-right btn btn-xs btn-white">标签</a>
                <i class="fa fa-clock-o"></i> 2018.09.01
              </div>
            </li>
            <li class="success-element">
              根据自己以前所了解的和从其他途径搜索到的信息，录入客户资料150家。
              <div class="agile-detail">
                <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                <i class="fa fa-clock-o"></i> 2018.05.12
              </div>
            </li>
            <li class="warning-element">
              锁定有意向客户20家。
              <div class="agile-detail">
                <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                <i class="fa fa-clock-o"></i> 2018.09.10
              </div>
            </li>
            <li class="warning-element">
              力争完成销售指标。
              <div class="agile-detail">
                <a href="#" class="pull-right btn btn-xs btn-white">标签</a>
                <i class="fa fa-clock-o"></i> 2018.09.09
              </div>
            </li>
            <li class="info-element">
              在总结和摸索中前进。
              <div class="agile-detail">
                <a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
                <i class="fa fa-clock-o"></i> 2018.08.04
              </div>
            </li>
            <li class="success-element">
              不断学习行业知识、产品知识，为客户带来实用介绍内容
              <div class="agile-detail">
                <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                <i class="fa fa-clock-o"></i> 2018.05.12
              </div>
            </li>
            <li class="danger-element">
              先友后单: 与客户发展良好友谊，转换销售员角色，处处为客户着想
              <div class="agile-detail">
                <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                <i class="fa fa-clock-o"></i> 2018.11.04
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="ibox">
        <div class="ibox-content">
          <h3>已完成</h3>
          <p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p>
          <ul class="sortable-list connectList agile-list">
            <li class="info-element">
              制定工作日程表
              <div class="agile-detail">
                <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                <i class="fa fa-clock-o"></i> 2018.09.10
              </div>
            </li>
            <li class="warning-element">
              每天坚持打40个有效电话，挖掘潜在客户
              <div class="agile-detail">
                <a href="#" class="pull-right btn btn-xs btn-white">标签</a>
                <i class="fa fa-clock-o"></i> 2018.09.09
              </div>
            </li>
            <li class="warning-element">
              拜访客户之前要对该客户做全面的了解(客户的潜在需求、职位、权限以及个人性格和爱好)
              <div class="agile-detail">
                <a href="#" class="pull-right btn btn-xs btn-white">标签</a>
                <i class="fa fa-clock-o"></i> 2018.09.09
              </div>
            </li>
            <li class="warning-element">
              提高自己电话营销技巧，灵活专业地与客户进行电话交流
              <div class="agile-detail">
                <a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
                <i class="fa fa-clock-o"></i> 2018.08.04
              </div>
            </li>
            <li class="success-element">
              通过电话销售过程中了解各盛市的设备仪器使用、采购情况及相关重要追踪人
              <div class="agile-detail">
                <a href="#" class="pull-right btn btn-xs btn-white">标记</a>
                <i class="fa fa-clock-o"></i> 2018.05.12
              </div>
            </li>
          
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
<script>
	    $(document).ready(function () {
	        $(".sortable-list").sortable({connectWith: ".connectList"}).disableSelection()
	    });
    
</script>
</body>
</html>
